<template>
  <div>
    <ul class="ul">
      <li @click="click('avatar')">
        <span>头像</span>
        <span><img :src="item.avatar" alt=""></span>
      </li>
      <li @click="click('nickname')">
        <span>昵称</span>
        <span>{{ item.nickname }}</span>
      </li>
      <li>
        <span>手机号</span>
        <span>{{ item.mobile }}</span>
      </li>
      <li @click="click('sex')">
        <span>性别</span>
        <!--      <span>{{sex}}</span>-->
        <span>{{ item.sex === 0 ? '男' : item.sex === 1 ? '女' : item.sex === 3 ? '保密' : '' }}</span>
      </li>
      <li @click="click('birthday')">
        <span>出生日期</span>
        <span>{{ item.birthday }}</span>
      </li>
      <li @click="click('chengsi')">
        <span>所在城市</span>
        <span>{{ txt }}</span>
      </li>
    </ul>
    <!--修改头像-->
    <van-popup v-model="show" position="bottom" :style="{ height: '22.2%' }">
      <ul class="popup">
        <li>
          拍照
          <input type="file" accept="image/*" @change="onChangeImg">
        </li>
        <li>
          从手机相册选择
          <input type="file" accept="image/*" @change="onChangeImg">
        </li>
        <li @click="show = false">
          取消
        </li>
      </ul>
    </van-popup>
    <van-popup v-model="birthdayShow" ref="btn" position="bottom" :style="{ height: '39.8%' }">
      <van-area @confirm="confirm" @cancel="cancel" :area-list="areaList"/>
    </van-popup>
    <van-popup v-model="birthdayShow1" ref="btn" position="bottom" :style="{ height: '39.8%' }">
      <van-datetime-picker
          @cancel="cancel1"
          @confirm="confirm1"
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
import {getInfo, getImg, user} from "@/utils/api";
import {Toast} from "vant";
import {areaList} from '@vant/area-data'

export default {
  name: "info",
  data() {
    return {
      item: [],
      // sex:''
      show: false,
      birthdayShow: false,
      birthdayShow1:false,
      areaList,
      csValue: [],
      txt: '',
      avatar: '',
      minDate: new Date(1955, 0, 1),
      maxDate: new Date(2023, 12, 31),
      currentDate: new Date(2022, 0, 1),
    }
  },
  created() {
    getInfo().then(res => {
      console.log(res)
      this.item = res.data
      this.avatar = res.data.avatar
      if (this.item.province_id === 0) {
        this.txt = '请选择'
      } else {
        this.txt = this.item.province_name + ',' + this.item.city_name + ',' + this.item.district_name
      }
      // if(this.item.sex===0){
      //   this.sex = '男'
      // }else if(this.item.sex===1){
      //   this.sex = '女'
      // }else {
      //   this.sex = '保密'
      // }
    })
  },
  methods: {
    click(v) {
      switch (v) {
        case "avatar": //修改头像 模态框显示隐藏
          this.show = true
          break
        case "nickname"://修改昵称
          this.$router.push({name: 'set-info-user', query: {nickname: this.item.nickname}})
          break
        case "sex"://修改性别
          this.$router.push({name: 'set-info-sex', query: {sex: this.item.sex}})
          break
        case "birthday"://修改性出生日期
          this.birthdayShow1 = true
          break
        case "chengsi"://修改地址
          this.birthdayShow = true
          break
      }
    },
    onChangeImg(e) {
      let formData = new FormData()
      // console.log(e.target.files)
      formData.append('file', e.target.files[0]);
      getImg(formData).then(res => {
        console.log(res)
        user({avatar: res.data.path}).then(r => {
          if (r.code === 200) {
            console.log(res)
            Toast(r.msg)
            this.show = false
            this.item.avatar = res.data.path
          } else {
            Toast(res.msg)
          }
        })
      })
    },
    //城市选择
    confirm(value) {//确定按钮
      // console.log(1)
      // console.log(value)
      // value.forEach(v=>{
      //   console.log(v.code)
      //   return
      // })
      //有些地方数据库里没有 直接传地名过去也无效
      // let data = {province_name:value[0].name,city_name:value[1].name,district_name:value[2].name,avatar:this.avatar}
      let data = {province_id: value[0].code, city_id: value[1].code, district_id: value[2].code, avatar: this.avatar}
      console.log(data)
      user(data).then(res => {
        console.log(res)
        Toast(res.msg)
        if(res.code === 200){
          getInfo().then(res => {
            console.log(res)
            this.txt = res.data.province_name + ',' + res.data.city_name + ',' + res.data.district_name
          })
          Toast(res.msg)
        }else {
          Toast(res.msg)
        }
      })
      this.birthdayShow = false
    },
    cancel() {//取消按钮
      this.birthdayShow = false
    },
    confirm1(value){
      console.log(this.currentDate)
      this.birthdayShow1 = false
    },
    cancel1(){
      this.birthdayShow1 = false
    }
  }
}
</script>

<style scoped lang="scss">
.ul {
  padding: 5px 15px;
  width: 100%;
  background-color: #ffffff;

  li {
    //width: 345px;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;

    span {
      display: flex;
      align-items: center;
      height: 100%;

      &:last-child {
        margin-right: 15px;
        color: #8c8c8c;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 560;
      }

      img {
        width: 37px;
        height: 37px;
        border-radius: 50%;
      }
    }

    &:last-child {
      border-bottom: none;
    }

    &:nth-child(3) {
      &::before {
        width: 0;
        height: 0;
        //border: 0;
      }
    }

    &::before {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      //width: 0.26667rem;
      width: 2.66667vw;
      //height: 0.26667rem;
      height: 2.66667vw;
      transform: translateY(-50%) rotate(45deg);
      border-top: 1px solid #b7b7b7;
      border-right: 1px solid #b7b7b7;
    }

    //&::after{
    //  content: "";
    //  display: block;
    //  position: absolute;
    //  bottom: 0;
    //  left: 50%;
    //  transform: translateX(-50%);
    //  width: 100%;
    //  height: 1px;
    //  background-color: #f5f5f5;
    //}
  }
}

.popup {
  padding: 5px 15px;

  li {
    text-align: center;
    height: 45px;
    line-height: 45px;
    font-size: 17px;
    font-weight: 400;
    color: #030303;
    border-bottom: 1px solid #f5f5f5;
    position: relative;

    &:last-child {
      border-bottom: none;
    }

    input {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
  }
}
</style>